<script setup>
	import { defineEmits, defineProps, reactive } from 'vue'
	import config from './config'
	import { cloneDeep } from 'lodash-es'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'

	const emits = defineEmits(['upDataConfig'])

	const props = defineProps({
		config: {
			type: Object,
			default: () => cloneDeep(config)
		}
	})
	// 样式
	const container = computed(() => ({
		padding: `${props.config.style.paddingT}px ${props.config.style.paddingR}px ${props.config.style.paddingB}px ${props.config.style.paddingL}px`,
		justifyContent: props.config.style.iconPosition === 'left' ? props.config.style.contentPosition : 'space-between',
		background: props.config.style.bgColor,
		borderColor: props.config.style.borderColor,
		borderWidth: props.config.style.borderWidth + 'px',
		borderStyle: props.config.style.borderStyle,
		borderTopLeftRadius: props.config.style.bgRTL + 'px',
		borderTopRightRadius: props.config.style.bgRTR + 'px',
		borderBottomLeftRadius: props.config.style.bgRBL + 'px',
		borderBottomRightRadius: props.config.style.bgRBR + 'px',
		boxShadow: `${props.config.style.shadowX}px ${props.config.style.shadowY}px ${props.config.style.shadowDegree}px ${props.config.style.shadowColor}`
	}))
	const titleStyle = computed(() => ({
		fontSize: props.config.style.titleSize + 'px',
		color: props.config.style.titleColor,
		fontWeight: props.config.style.titleWeight ? 800 : 500,
		fontStyle: props.config.style.titleStyle ? 'italic' : '',
		textDecoration: props.config.style.titleLine ? 'underline' : ''
	}))
	const dataStyle = computed(() => ({
		fontSize: props.config.style.dataSize + 'px',
		color: props.config.style.dataColor,
		fontWeight: props.config.style.dataWeight ? 800 : 500,
		fontStyle: props.config.style.dataStyle ? 'italic' : '',
		textDecoration: props.config.style.dataLine ? 'underline' : '',
		marginTop: !props.config.style.dataUp ? props.config.style.spacing + 'px' : '0px',
		marginBottom: props.config.style.dataUp ? props.config.style.spacing + 'px' : '0px'
	}))
	const iconBoxStyle = computed(() => ({
		display: props.config.style.iconShow ? 'flex' : 'none',
		backgroundColor: props.config.style.iconBgColor,
		height: props.config.style.iconBgSize + 'px',
		width: props.config.style.iconBgSize + 'px',
		borderTopLeftRadius: props.config.style.iconRTL + 'px',
		borderTopRightRadius: props.config.style.iconRTR + 'px',
		borderBottomLeftRadius: props.config.style.iconRBL + 'px',
		borderBottomRightRadius: props.config.style.iconRBR + 'px'
	}))
	const iconStyle = computed(() => ({
		color: props.config.style.iconColor,
		fontSize: props.config.style.iconSize + 'px'
	}))

	const formState = ref(cloneDeep(config.data))
	const dataSource = ref({})
	const oldDataSetJson = ref({})
	// 获取数据源数据函数
	const fetchChartData = async (isFlag = false) => {
		const { dataSetType, dataSetJson } = props.config.dataSetConfig
		const isNew = isFlag || JSON.stringify(oldDataSetJson.value) !== JSON.stringify(dataSetJson)

		// 如果是静态数据
		if (dataSetType === 0) {
			formState.value.numValue.value = props.config.data.numValue.value
			formState.value.title.value = props.config.data.title.value
			return
		}
		// 仅在 dataSetId 实际改变时才重新获取数据
		if (dataSetType === 1 && dataSetJson && Object.keys(dataSetJson).length > 0 && isNew) {
			// 更新值
			oldDataSetJson.value = dataSetJson
			// 模拟接口返回下拉数据
			await datasetApi.preview(dataSetJson).then((res) => {
				dataSource.value = res || []
				// 模拟接口返回数据源
				formState.value.numValue.value = dataSource.value[0]?.[props.config.data.title.field] // 使用可选链避免 dataSource[0] 不存在时报错
				// 优先使用别名更新标题
				formState.value.title.value = props.config.data.title?.alias || props.config.data.title.field
			})
		} else {
			if (Object.keys(dataSource.value).length === 0) return
			// 模拟接口返回数据源
			formState.value.numValue.value = dataSource.value[0]?.[props.config.data.title.field] // 使用可选链避免 dataSource[0] 不存在时报错
			// 优先使用别名更新标题
			formState.value.title.value = props.config.data.title?.alias || props.config.data.title.field
		}
	}

	const onReload = (isFlag = false) => {
		fetchChartData(isFlag)
	}
	defineExpose({ onReload })
</script>

<template>
	<div class="container flex items-center h-full pl-2 py-1" :style="{ ...container }">
		<div class="iconfont_box" :style="{ ...iconBoxStyle }" v-if="props.config.style.iconPosition === 'left'">
			<i :class="['iconfont', props.config.style.icon]" :style="{ ...iconStyle }"></i>
		</div>
		<div class="ml-2" :style="{ textAlign: props.config.style.align }">
			<span class="font-7" :style="{ ...titleStyle }" v-if="!props.config.style.dataUp">{{
				formState.title.value
			}}</span>
			<div :style="{ ...dataStyle }">
				{{ formState.numValue.value }}
			</div>
			<span class="font-7" :style="{ ...titleStyle }" v-if="props.config.style.dataUp">{{
				formState.title.value
			}}</span>
		</div>
		<div class="iconfont_box" :style="{ ...iconBoxStyle }" v-if="props.config.style.iconPosition === 'right'">
			<i :class="['iconfont', props.config.style.icon]" :style="{ ...iconStyle }"></i>
		</div>
	</div>
</template>

<style scoped lang="less">
	.container {
		// 修改圆角半径为不同的值
		// border-radius: 10px; // 调整为图片中的圆角弧度
		// 添加阴影效果
		// box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		padding: 20px; // 增加内边距
		// background-color: white;
	}

	.iconfont_box {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 40px; // 确保宽度和高度相同以实现圆形
		height: 40px;
		background-color: #fdb1e2;
	}
</style>
